<template>
    <div class="nurse-scheduling-container">
      <div class="nurse-scheduling-content">
        <div class="header">
          <h2>护士排班管理</h2>
          <el-button type="primary" @click="handleAdd" class="add-btn">
            <el-icon><Plus /></el-icon>添加
          </el-button>
        </div>
        
        <el-table 
          :data="tableData" 
          border 
          style="width: 100%; min-width: 900px;" 
          :header-cell-style="{background:'#f5f7fa', color:'#606266'}"
          highlight-current-row
          stripe
          class="custom-table">
          <el-table-column prop="id" label="ID" min-width="5%" width="80" align="center" />
          <el-table-column prop="groupName" label="护理单元" min-width="20%" align="center" />
          <el-table-column prop="nurseName" label="护士" min-width="20%" align="center" />
          <el-table-column prop="rIntern" label="分管实习生" min-width="20%" align="center" />
          <el-table-column prop="sIntern" label="监管实习生" min-width="20%" align="center" />
          <el-table-column label="操作" min-width="15%" align="center" fixed="right">
            <template #default="scope">
              <div class="operation-btns">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)" class="edit-btn">
                  <el-icon><Edit /></el-icon>编辑
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)" class="delete-btn">
                  <el-icon><Delete /></el-icon>删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="empty-placeholder" v-if="tableData.length === 0">
          <el-empty description="暂无数据" />
        </div>
      </div>
  
      <!-- 添加/编辑对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="isEdit ? '编辑护士排班' : '添加护士排班'"
        width="550px"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        class="custom-dialog"
      >
        <el-form :model="ruleForm" label-width="120px" :rules="rules" ref="formRef" class="custom-form">
          <el-form-item label="组名" prop="groupName">
            <el-input v-model="ruleForm.groupName" placeholder="请输入组名" class="custom-input" />
          </el-form-item>
          <el-form-item label="护士" prop="nurseName">
            <el-select v-model="ruleForm.nurseName" placeholder="请选择护士姓名" class="custom-select">
              <el-option label="李芳" value="李芳" />
              <el-option label="刘雪" value="刘雪" />
              <el-option label="张丽" value="张丽" />
            </el-select>
          </el-form-item>
          <el-form-item label="分管实习生" prop="rIntern">
             <el-select v-model="ruleForm.rIntern" placeholder="请选择分管实习生姓名" class="custom-select">
              <el-option label="李晓晓" value="李晓晓" />
              <el-option label="王璐璐" value="王璐璐" />
              <el-option label="刘菲" value="刘菲" />
            </el-select>
          </el-form-item>
          <el-form-item label="监管实习生" prop="sIntern">
            <el-select v-model="ruleForm.sIntern" placeholder="请选择监管实习生姓名" class="custom-select">
              <el-option label="朱茜" value="朱茜" />
              <el-option label="茂祥" value="茂祥" />
              <el-option label="毛湘" value="毛湘" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="submitForm" class="submit-btn">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  import { ref, reactive, onMounted } from 'vue'
  import { Plus, Edit, Delete } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  // 表格数据
  const tableData = ref([])
  const getTableData = async () => {
    await proxy.http.get('api/EquipmentController/ShowNurseGroup').then(res => {
      tableData.value = res.data
    })
  }

  onMounted(() => {
    getTableData()
  })
  
  // 表单数据
  const dialogVisible = ref(false)
  const isEdit = ref(false)
  const ruleForm = reactive({
    id:0,
    groupName:"",
    nurseName:"",
    rIntern:"",
    sIntern:"" ,
    nurseCode:""
  })
  const formRef = ref(null)
  
  // 表单验证规则
  const rules = {
    groupName: [{ required: true, message: '请输入组名', trigger: 'blur' }],
    nurseName: [{ required: true, message: '请选择护士姓名', trigger: 'blur' }],
    rIntern: [{ required: true, message: '请选择分管实习生姓名', trigger: 'blur' }],
    sIntern: [{ required: true, message: '请选择监管实习生姓名', trigger: 'blur' }]
  }
  
  // 添加按钮
  const handleAdd = () => {
    isEdit.value = false
    resetForm()
    dialogVisible.value = true
  }
  
  // 编辑按钮
  const handleEdit = (row) => {
    isEdit.value = true
    Object.assign(ruleForm, row)
    dialogVisible.value = true
  }
  
  // 删除按钮
  const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除该排班记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
       
        proxy.http.post(`api/EquipmentController/DelNurseGroup?id=${row.id}`).then(res=>{
            if(res>0){
              ElMessage.success('删除成功')
                    getTableData() // 刷新表格数据
                }
            })
          
      })
  }
  
  // 提交表单
  const submitForm =  () => {
    formRef.value.validate((valid) => {
      if  (valid) {
        if (isEdit.value) {
          // 编辑模式
          proxy.http.post('api/EquipmentController/UpdNurseGroup',ruleForm).then(res=>{
            if(res>0){
                    ElMessage.success('修改成功')
                    getTableData() // 刷新表格数据
                }
            })
          
        } else {
        proxy.http.post('api/EquipmentController/AddNurseGroup',ruleForm).then(res=>{          
                if(res>0){
                    ElMessage.success('添加成功')
                    getTableData() // 刷新表格数据
                }
            })
        }
        dialogVisible.value = false
      }
    })
  }
  
  // 重置表单
  const resetForm = () => {
    ruleForm.groupName = ""
    ruleForm.nurseName = ""
    ruleForm.rIntern = ""
    ruleForm.sIntern = ""
  }

  </script>
  
  <style scoped>
  .nurse-scheduling-container {
    padding: 24px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 84px);
  }
  
  .nurse-scheduling-content {
    background-color: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .header h2 {
    margin: 0;
    font-size: 20px;
    color: #303133;
    font-weight: 600;
  }
  
  .add-btn {
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s;
  }
  
  .add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .custom-table {
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .operation-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  
  .edit-btn, .delete-btn {
    transition: all 0.2s;
  }
  
  .edit-btn:hover, .delete-btn:hover {
    transform: scale(1.05);
  }
  
  .custom-dialog {
    border-radius: 8px;
  }
  
  .custom-form {
    padding: 10px 20px;
  }
  
  .custom-input, .custom-select {
    width: 100%;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
  }
  
  .submit-btn, .cancel-btn {
    padding: 10px 24px;
    font-weight: 500;
    transition: all 0.3s;
  }
  
  .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .empty-placeholder {
    padding: 40px 0;
    display: flex;
    justify-content: center;
  }
  
  /* 让表单项有更好的间距 */
  :deep(.el-form-item) {
    margin-bottom: 24px;
  }
  
  /* 美化表格头部样式 */
  :deep(.el-table th) {
    font-weight: 600;
    font-size: 14px;
  }
  
  /* 美化表格内容样式 */
  :deep(.el-table td) {
    padding: 12px 0;
  }
  
  /* 修改表单项标签样式 */
  :deep(.el-form-item__label) {
    font-weight: 500;
  }
  
  /* 修复原代码中的错误 - 引用form但实际使用的是ruleForm */
  :deep(.el-form-item__error) {
    color: #f56c6c;
  }
  </style>